<template>
  <div class="article">
    <!-- <ProductList v-bind:products="products"></ProductList> -->

    <div
      class="product-info"
      v-for="(item, index) in products"
      :key="item.id"
      @click="lookDetail(item.id)"
    >
      <p>{{ index + 1 }} - {{ item.name }}</p>
      <p>价格:{{ item.price }}</p>
      <p>描述：{{ item.dec }}</p>
    </div>

    <button @click="toDetail">跳转到另一个带导航的列表</button>
  </div>
</template>

<script>
// import ProductList from "@/components/ProductList.vue";
// import ProductList from "@/components/ProductList.vue";
import axios from "axios";
export default {
  name: "ArticlePage",
  methods: {
    toDetail() {
      this.$router.push({
        path: "/detail",
      });
    },
    lookDetail(productId) {
      console.log(productId);
      this.$router.push({
        name: "productDetail",
        params: {
          productId,
        },
      });
    },
  },
  components: {
    // ProductList,
  },
  data() {
    return {
      products: [],
    };
  },
  async created() {
    const res = await axios.get("http://localhost:9700/api/rest/boot/bills");
    this.products = res.data;
  },
};
</script>

<style>
.home-view {
  width: 300px;
  height: auto;
  /* background-color: red; */
}
</style>